<!doctype html>

<head>

    <!-- player skin -->
    <link rel="stylesheet" href="../skin/minimalist.css">

    <!-- site specific styling -->
    <style>
        body { font: 12px "Myriad Pro", "Lucida Grande", sans-serif; text-align: center; padding-top: 5%; }
        .flowplayer { width: 80%; }
    </style>

    <!-- flowplayer depends on jQuery 1.7.1+ (for now) -->
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

    <!-- include flowplayer -->
    <script src="../flowplayer.min.js"></script>

    <script>
        $(function () {
            //flowplayer 绑定错误信息的输出
            flowplayer().bind("error", function (e,api,error) {
                console.info(error.code,error.message);
            });

            $("button").click(function () {
                flowplayer(1).load($(this).data("href"));
            });
        });
    </script>

</head>

<body>

<!-- the first player -->
<div class="flowplayer" data-ratio="0.4167" data-debug="true">
    <video>
        <source type="video/webm" src="http://bad.flowplayer.org/bauhaus.webm">
        <source type="video/mp4" src="http://bad.flowplayer.org/bauhaus.mp4">
    </video>
</div>

<div class="flowplayer" data-ratio="0.4167" data-debug="true">
    <video>
        <source type="video/webm" src="http://stream.flowplayer.org/bauhaus.webm">
        <source type="video/mp4"  src="http://stream.flowplayer.org/bauhaus.mp4">
    </video>
</div>

<p>
    <button id="good" data-href="http://stream.flowplayer.org/functional.webm">
        Load good URL
    </button>

    <button id="bad" data-href="http://foo.flowplayer.org/invalid.webm">
        Load bad URL
    </button>
</p>

</body>